<template>
	<view :style="overflow ? 'height: 100vh;overflow: hidden' : ''">
		<!-- 头部 -->
		<!-- <uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff"
			left-text="订单" rightText="录入新单" @clickRight="addOrder">
		</uni-top> -->
		<view class="head-content">
			<text class="order-text">订单</text>
			<text class="add-order" @click="addOrder" v-if="app_is_examine">录入新单</text>
		</view>
		<!-- 筛选 -->

		<view class="screening-box flex-space">

			<van-dropdown-menu class="dropdown-menu" active-color="#585CF7">
				<van-dropdown-item @open="open" @close="close" v-model="formData.pid" :value="formData.pid"
					:options="option1" @change="onChangeMenu" data-text="product" />
				<van-dropdown-item @open="open" @close="close" v-model="formData.month" :options="option2"
					@change="onChangeMenu" data-text="date" />
				<!-- <van-dropdown-item bindopen="open" bindclose="close" value="{{ formData.status }}" options="{{ option3 }}" bind:change="onChangeMenu" data-text="state" /> -->

				<van-dropdown-item id="item" @open="open" @close="close" :title="steteText">
					<view class="ld-con flex ">
						<!-- 一级 -->
						<view class="left-item">
							<view :class="['yiji-item',formData.orderType==''?'active-item':'']" @click="onChangeState"
								data-state="">全部状态</view>
							<view @click="onChangeState" :class="['yiji-item',formData.orderType==1?'active-item':'']"
								:data-state="1">订单</view>
							<view @click="onChangeState" :class="['yiji-item',formData.orderType==2?'active-item':'']"
								:data-state="2">消息推送</view>
						</view>
						<!-- 二级 -->
						<view class="right--item">
							<!-- 订单 -->
							<view v-if="formData.orderType==1">
								<view @click="onChangeStateItem" :data-item="item"
									:class="['yiji-item', 'erji-item', steteText==item.text && isState?'active-item':'']"
									v-for="(item,index) in option3" :key="index">{{item.text}}</view>
							</view>
							<!-- 消息推送 -->
							<view v-if="formData.orderType==2">
								<view @click="onChangeStateItem" :data-item="item"
									:class="['yiji-item', 'erji-item', steteText==item.text && isState?'active-item':'']"
									v-for="(item,index) in option5" :key="index">{{item.itemText}}</view>
							</view>
						</view>

					</view>
				</van-dropdown-item>
				<van-dropdown-item v-if="logInfo.teamPartnerStatus==1" @open="open" @close="close"
					v-model="formData.eid" :options="option4" @change="onChangeMenu" data-text="agent" />
			</van-dropdown-menu>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view v-if="list.length > 0 && token!=''">
				<view v-for="(item,index) in list" :key="index">

					<!-- 普通订单 -->
					<view v-if="item.orderType==1" class="content-item" @click="goDetail"
						:data-orderNumber="item.orderNumber">
						<view class="content-head flex-space">
							<view class="flex-align">
								<text class="order-num">{{item.orderNumber}}</text>
								<view class="order-class">{{item.productName}}</view>
							</view>
							<text class="date-text">{{item.day}}</text>
						</view>
						<view class="flex-space">
							<view class="flex-align">
								<text class="name">{{item.borrowerName}}</text>
								<view v-if="item.statusName=='待审批'" class="order-state pending">{{item.statusName}}
								</view>
								<view v-else-if="item.statusName=='待放款'" class="order-state lending">{{item.statusName}}
								</view>
								<view v-else-if="item.statusName=='已放款'" class="order-state has-been-lending">
									{{item.statusName}}
								</view>
								<view v-else class="order-state">{{item.statusName}}</view>
							</view>
							<text class="amount" v-if="item.money">￥<text class="amount-num">{{item.money}}</text>
								万</text>
						</view>
						<!-- 地址 -->
						<view class="address-text">{{item.address?item.address:''}}</view>
						<!-- tips -->
						<view class="tips-box flex-align">
							<image src="../../static/image/page/time.png" class="surTime"></image>
							<text class="tips-text">本订单待放款完毕后核算业绩提成及奖金</text>
						</view>
					</view>
					<!-- 推送消息订单 -->
					<view v-if="item.orderType==2" class="content-item" @click="goMesDetail" :data-id="item.id">
						<view class="content-head flex-space">
							<view class="flex-align">
								<text class="order-num order-num-text">您有一条新订单申请推送，请及时处理！</text>
							</view>
							<view v-if="item.statusName=='已放弃'" class="order-state have-give-up">{{item.statusName}}
							</view>
							<view v-else-if="item.statusName=='已跟进'" class="order-state lending">{{item.statusName}}
							</view>
							<view v-else-if="item.statusName=='已失效'" class="order-state has-been-lending">
								{{item.statusName}}
							</view>
							<view v-else class="order-state">{{item.statusName}}</view>

						</view>
						<view>
							<view class="mes-con-text">申请人：{{item.quickApplyBasicInfoDto.name}}</view>
							<view class="mes-con-text">{{item.quickApplyBasicInfoDto.applyDescription}}</view>
							<view class="mes-con-text">申请时间：{{item.quickApplyBasicInfoDto.applyTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载无数据 -->
			<view class="no-data" v-if="token==''">
				<image src="../../static/image/page/order-no-data.png" class="order-no-data"></image>
			</view>
			<!-- 上拉触底无数据 -->
			<no-data v-if="isComplete && token!=''"></no-data>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	// import vanDropdownMenu from '/wxcomponents/vant/dropdown-menu/index.vue'
	const app = getApp();
	export default {
		computed: {
			...mapState(["userInfo"]),
			...mapGetters(["hasLogin"]),
		},
		// components:{uniStatusBar},
		data() {
			return {
				overflow: false,
				formData: {
					eid: '', //归属人条件id
					keyWord: '', //关键字,订单号,客户姓名
					month: '', //最近月数,不传默认全部
					pageNo: 1,
					pid: '', //产品id,不传默认全部
					status: '', //订单状态,默认全部
					orderType: '', //订单或消息推送状态,默认全部,0全部,1订单,2消息推送
				},
				isLoading: false,
				isComplete: false,
				list: [],
				token: '',
				logInfo: {},
				option10: [{
						text: '全部商品',
						value: 0
					},
					{
						text: '新款商品',
						value: 1
					},
					{
						text: '活动商品',
						value: 2
					},
				],
				value1: 0,
				option1: [{
					text: '全部产品',
					value: ''
				}],
				option2: [{
						text: '全部',
						value: "",
					}, {
						text: '近三个月',
						value: '3',
					}, {
						text: '近半年',
						value: "6",
					},
					{
						text: '近一年',
						value: "12",
					}
				],
				option3: [{
					text: '全部状态',
					value: '0'
				}, ],
				option4: [{
					text: '全部经纪人',
					value: '0'
				}, ],
				option5: [{
					itemText: '全部状态',
					itemValue: ''
				}, ],

				steteText: '全部状态', //状态文本
				isState: false, //是否选择二级状态
				app_is_examine: true
			}
		},
		onLoad() {

		},
		onShow() {

			this.token = uni.getStorageSync('token');
			// this.logInfo = uni.getStorageSync('logInfo') ? JSON.parse(uni.getStorageSync('logInfo')) : null;
			this.logInfo = this.userInfo;
			this.formData.pageNo = 1;
			this.list = [];
			this.isLoading = false;
			this.isComplete = false;
			this.app_is_examine = app.globalData.app_is_examine;
			// console.log('token', this.data.token,'login',this.data.logInfo)
			if (this.token) {
				let showDialog = app.globalData.showDialog;
				if (showDialog) {
					this.formData.status = 0;
					this.steteText = '待跟进';
					this.formData.orderType = 2;
				}
				// console.log(this.data.token)
				this.getOrderList();
				this.getProduct();
				this.getOrderState();
				this.getAgent();
				this.getApplyStatus();

			}
		},
		onReachBottom: function() {
			!this.isLoading && !this.isComplete && this.getOrderList();
		},
		onPullDownRefresh() {
			if (!this.hasLogin) {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
				return;
			}
			this.formData.pageNo = 1;
			this.list = [];
			this.isLoading = false;
			this.isComplete = false;
			this.getOrderList();
			uni.stopPullDownRefresh();
			
			

		},
		methods: {
			//切换二级菜单
			onChangeStateItem(e) {
				let item = e.currentTarget.dataset.item;
				console.log(item);
				this.formData.status = item.value === 0 ? 0 : item.value || item.itemValue || '';
				this.steteText = item.text || item.itemText || '';
				this.list = [];
				this.isLoading = false;
				this.isComplete = false;
				this.formData.pageNo = 1;
				this.isState = true;
				this.getOrderList();
				this.selectComponent('#item').toggle();
			},
			//切换一级菜单
			onChangeState(e) {
				let state = e.currentTarget.dataset.state;
				this.formData.orderType = state;
				console.log(state)
				if (state == '') {
					this.formData.status = '';
					this.steteText = '全部状态';
					this.list = [];
					this.isLoading = false;
					this.isComplete = false;
					this.formData.pageNo = 1;
					this.isState = false;
					this.getOrderList();
					this.selectComponent('#item').toggle();
				}
			},
			//去消息推送详情
			goMesDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:`/pages/mes-order-detail/index?id=${id}`,
				})
			},
			//去详情
			goDetail(e) {
				let orderNumber = e.currentTarget.dataset.ordernumber;
				uni.navigateTo({
					url: `/pages/orderInside/orderReview?orderNum=${orderNumber}`,
				})
			},
			open() {
				this.overflow = true;
			},
			close() {
				this.overflow = false;
			},
			//改变菜单时
			onChangeMenu(e) {
				// console.log(e)
				let type = e.currentTarget.dataset.text;
				let value = e.detail;
				console.log(e, this.formData.pid)
				if (type == 'product') {
					//切换产品
					this.formData.pid = value;
				} else if (type == 'date') {
					//日期
					this.formData.month = value;
				} else if (type == 'state') {
					// 状态
					this.formData.status = value;
				} else {
					//经纪人
					this.formData.eid = value;
				}

				this.list = [];
				this.isLoading = false;
				this.isComplete = false;
				this.formData.pageNo = 1;
				this.getOrderList();
			},
			//经纪人
			getAgent() {
				this.$api.getTeamList().then(res => {
					let data = res.data.data.map(item => {
						item = {
							text: item.empName,
							value: item.id
						}
						return item;
					})
					data.unshift({
						text: '全部经纪人',
						value: ''
					})

					this.option4 = data;

				})
			},
			//获取推送消息状态
			getApplyStatus() {
				this.$api.plainDictionary('apply_status').then(res => {
					res.data.data.unshift({
						itemText: '全部状态',
						itemValue: ''
					})

					this.option5 = res.data.data;

				})
			},
			//获取所有订单状态
			getOrderState() {
				this.$api.getOrderState().then(res => {
					res.data.data.unshift({
						text: '全部状态',
						value: ''
					})

					this.option3 = res.data.data;

					// console.log(this.data.option1)
				})
			},
			//活去所有产品列表
			getProduct() {
				this.$api.getProductList().then(res => {
					res.data.data.unshift({
						text: '全部产品',
						value: ''
					})

					this.option1 = res.data.data;

					// console.log(this.data.option1)
				})
			},
			//录入新单
			addOrder() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/orderInside/addOrder',
					})
				} else {
					uni.redirectTo({
						url: '/pages/user/login-way/index'
					})
				}
			},


			//获取订单列表
			getOrderList() {
				this.isLoading = true;
				this.$api.getOrderList(this.formData).then(res => {
					let data = res.data.data.records;
					this.list = this.list.concat(data);
					this.formData.pageNo = ++this.formData.pageNo;
					this.isLoading = false;
					this.isComplete = !data.length;

				})
			}

		},

		/* 生命周期函数--监听页面隐藏 */
		onHide: function() {
			app.globalData.showDialog = false;
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			app.globalData.showDialog = false;
		},
	}
</script>

<style scoped lang="scss">
	.head-content {
		width: 100%;
		height: 176rpx;
		background-color: #585CF7;
		padding: 60rpx 30rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.order-text {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.add-order {
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	/* 筛选 */
	.screening-box {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f8f8f8;
		margin-top: -13rpx;
		position: fixed;
		z-index: 99;
		height: 122rpx;
		top: 160rpx;
		overflow: hidden;
	}

	.screening-item {

		flex: 1;
	}

	.screening-item-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.arrow {
		width: 12rpx;
		height: 11rpx;
		margin-left: 9rpx;
	}

	/* 内容 */
	.content {
		padding: 0 30rpx;
		position: relative;
		top: 280rpx;
		padding-bottom: 110rpx;
	}

	.content-item {
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 0 17rpx 30rpx 17rpx;
	}

	.content-head {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 28rpx;
	}

	.date-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}

	.order-num {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.order-class {
		border: 1rpx solid #585CF7;
		border-radius: 4rpx;
		padding: 5rpx;
		margin-left: 26rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #585CF7;
	}

	.amount {
		font-size: 22rpx;
		font-weight: 500;
		color: #333333;
	}

	.amount-num {
		font-size: 42rpx;
		font-weight: blod;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	/* 进件审核 */
	.order-state {
		padding: 6rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #585CF7;
		margin-left: 16rpx;
	}

	/* 待审批 */
	.pending {
		background-color: #FF9500;
	}

	/* 待放款 */
	.lending {
		background-color: #28B779;
	}

	/* 已放款 */
	.has-been-lending {
		background-color: #F96363;
	}

	/* 已放弃 */
	.have-give-up {
		background-color: #BEBEBE;
	}

	.address-text {
		margin-top: 36rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 19rpx;
	}

	.tips-box {
		background-color: #F8F8F8;
		width: 100%;
		padding: 19rpx 20rpx;
	}

	.surTime {
		width: 26rpx;
		height: 26rpx;
		margin-right: 9rpx;
	}

	.tips-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}

	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
	}

	.order-no-data {
		width: 374rpx;
		height: 326rpx;
	}


	.dropdown-menu {
		width: 100%;
		height: 100%;
		// padding-right: 30rpx;

	}

	/* 推送订单信息 */
	.order-num-text {
		color: #585CF7;
	}

	.mes-con-text {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 27rpx;
	}

	.mes-con-text:last-child {
		margin-bottom: 0;
	}


	/* 二级联动 */

	.ld-con {
		padding: 0 32rpx;
		/* position: relative; */
	}

	.left-item {
		border-right: 1rpx solid #F8F8F8;
		width: 20%;
		height: 400rpx;
		/* position: fixed;
	  left: 0;
	  top: 0; */
	}

	.yiji-item {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #F8F8F8;
		color: #323233;
	}

	.right--item {
		flex: 1;
		height: 400rpx;
		overflow: auto;
	}

	.erji-item {
		width: 100%;
		padding: 0 0 0 30rpx;
	}

	.active-item {
		color: #585CF7;
	}
</style>
